<template>
	<view>
		<!-- 状态栏 -->
		<uni-status-bar bgcolor="#FFe933"></uni-status-bar>
		<!-- 关闭按钮 -->
		<view class="icon iconfont icon-cha" @tap="back"></view>
		<!-- 引入背景图 -->
		<image class="loginhead" src="../../static/common/loginhead.png" mode="widthFix" lazy-load></image>
		<!-- 输入框 + 按钮 -->
		<view class="body">
			<!-- 账号密码登录 -->
			<template v-if="!status">
				<input type="text" class="uni-input common-input" placeholder="昵称/手机号/邮箱" v-model="username" />
				<view class="login-input-box">
					<input type="text" password="" class="uni-input common-input forget-input" placeholder="请输入密码" v-model="password" />
					<view class="forget-pwd m-f-jcc login-font-color">忘记密码?</view>
				</view>
			</template>
			<!-- 手机验证码登录 -->
			<template v-else>
				<view class="login-input-box">
					<view class="phone-pre m-f-jcc">+86</view>
					<input type="text" class="uni-input common-input phone-input" placeholder="手机号" v-model="phone" />
				</view>
				<view class="login-input-box">
					<input type="text" password="" class="uni-input common-input forget-input" placeholder="请输入验证码" v-model="checknum" />
					<view class="forget-pwd m-f-jcc login-font-color" @tap="getCheckNum">
						<view class="phone-code m-f-jcc">{{!codetime ? '获取验证码' : codetime+' s'}}</view>
					</view>
				</view>
			</template>
			<button type="default" :loading="false" class="user-set-btn" :class="{'user-set-btn-disable': disabled == true}" @tap="submit">完成</button>
		</view>
		<!-- 登录状态切换 -->
		<view class="login-status m-f-jcc login-padding login-font-color" @tap="changeStatus">
			{{status ? '账号密码登录' : '验证码登录'}}<view class="icon iconfont icon-qianjinxiayige login-font-color "></view>
		</view>
		<!-- 第三方登录 -->
		<view class="other-login-title m-f-jcc login-padding login-font-color ">第三方登录</view>
		<other-login :noback="false"></other-login>
		<!-- 协议 -->
		<view class="login-rule login-padding m-f-jcc login-font-color ">
			注册即代表您同意《仿糗事百科用户协议》
		</view>
	</view>
</template>

<script>
	import uniStatusBar from '../../components/uni-status-bar/uni-status-bar.vue'
	import otherLogin from '../../components/home/other-login.vue'
	export default {
		data() {
			return {
				status: false, //false 代表账号密码登录，true代表手机验证码登录
				disabled: true,
				loading: false,
				username: '',
				password: '',
				phone: '',
				checknum: '',
				codetime: 0,
			}
		},
		components: {
			uniStatusBar,
			otherLogin
		},
		watch: {
			username(val) {
				this.onBtnChange()
			},
			password(val) {
				this.onBtnChange()
			},
			phone(val) {
				this.onBtnChange()
			},
			checknum(val) {
				this.onBtnChange()
			},
		},
		methods: {
			isPhone() { // 验证手机号码
				let mPattern = /^1[34578]\d{9}$/
				return mPattern.test(this.phone)
			},
			async getCheckNum() { // 获取验证码
				if (this.codetime > 0) return
				// 验证手机号合法性
				if (!this.isPhone()) {
					return uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
				}
				try{
					// 请求服务器，发送验证码
					let [err, res] = await this.$http.post('/user/sendcode', {
						phone: this.phone
					})
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					// 请求失败错误处理
					this.$http.errorCheck(err, res)
					if (res.data.errCode === 30001) return
					// 发送成功，开启倒计时
					this.codetime = 60
					let timer = setInterval(() => {
						this.codetime --
						if (this.codetime < 1) {
							clearInterval(timer)
							this.codetime = 0
						}
					}, 1000)
				}catch(e){ return }
			},
			initInput() { // 初始化表单
				this.username = ''
				this.password = ''
				this.phone = ''
				this.checknum = ''
			},
			onBtnChange() { // 改变按钮状态
				if ((this.username && this.password) || (this.phone && this.checknum)) {
					this.disabled = false
					return
				}
				this.disabled = true
			},
			changeStatus() { // 切换登录状态
				this.initInput()
				this.status = !this.status
			},
			back() { // 返回上一步
				uni.navigateBack({
					delta: 1
				})
			},
			submit() { // 提交登陆
			  // 账号密码登录
				if (!this.status) {
					return this.User.login({
						url: '/user/login',
						data: {
							username: this.username,
							password: this.password
						}
					})
				}
				// 验证码登录
				// 验证手机号合法性
				if (!this.isPhone()) {
					return uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
				}
				return this.User.login({
					url: '/user/phonelogin',
					data: {
						phone: this.phone,
						code: this.checknum
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import  '../../common/form.css';
	.login-padding {
		padding: 20rpx 0;
	}
	.login-input-box {
		position: relative;
		.phone-pre {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100rpx;
			z-index: 100;
			font-weight: bold;
		}
		.phone-input {
			padding-left: 100rpx;
		}
		.forget-input {
			padding-right: 150rpx;
		}
		.forget-pwd {
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			width: 150rpx;
			z-index: 100;
		}
		.phone-code {
			background: #EEEEEE;
			border-radius: 10rpx;
			font-size: 25rpx;
			width: 150rpx;
			padding: 10rpx 0;
		}
	}
	.login-font-color {
		color: #BBBBBB;
	}
	.icon-cha {
		position: fixed;
		top: 60rpx;
		left: 30rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #332F0A;
		z-index: 200;
	}
	.loginhead {
		width: 100%;
	}
	.other-login-title {
		position: relative;
		&::before, &::after {
			position: absolute;
			background: #BBBBBB;
			height: 1rpx;
			width: 100rpx;
			content: '';
			top: 50%;
		}
		&::before {
			left: 25%;
		}
		&::after {
			right: 25%;
		}
	}
</style>
